﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DisplayBoardMain2.aspx.cs" Inherits="Catering.DisplayBoards.DisplayBoardMain2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>展板</title>
    <link href="/Style/DisplayBoard.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery_nav.js" type="text/javascript"></script>
    <script src="/Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

    <style type="text/css">
        .Top {
            width: 100%;
            height: 142px;
            background: url(/images/images_02.jpg) repeat-x;
        }

        .Top_Main {
            width: 100%;
            height: 142px;
            background: url(/images/images_01.jpg) no-repeat center;
            text-align: center;
            position: relative;
        }

            .Top_Main h2 {
                width: 100%;
                height: 50px;
                padding-top: 92px;
            }

            .Top_Main span {
                float: right;
                display: inline;
                font-size: 20px;
                position: absolute;
                right: 30px;
                top: 105px;
            }

                .Top_Main span a {
                    font-size: 14px;
                    text-decoration: none;
                    color: Red;
                }

        .Main {
            width: 100%;
            min-height: 750px;
            background: url(/images/images_03.jpg) no-repeat center;
            padding-top: 10px;
        }

        .Main_Content {
            width: 90%;
            margin: 0 auto;
            min-height: 700px;
            position: relative;
            overflow: hidden;
        }

        .Content {
            width: 100%;
            min-height: 700px;
            background-color: #fff;
            position: absolute;
            top: -7px;
            left: -10px;
            overflow: hidden;
        }

        #content_main {
            width: 100%;
            height: 600px;
            padding-top: 20px;
            margin-left: 23px;
        }

        .Content_foot {
            width: 100%;
            text-align: center;
            height: 55px;
            line-height: 55px;
            position: relative;
            padding-top: 10px;
        }

        .Page {
            height: 55px;
            position: absolute;
            right: 0px;
            top: 10px;
        }
            /*.Page li{ width:22px; height:55px; float:left; display:block; background:url(/images/images_09.png) no-repeat;}*/
            .Page li {
                width: 22px;
                height: 55px;
                float: left;
                display: block;
            }

            .Page .on {
                width: 22px;
                height: 55px;
                float: left;
                display: block;
                background: url(/images/images_08.png) no-repeat;
            }

        /*可伸缩边框样式*/
        .border_top {
            width: 100%;
            height: 10px;
            background: url(/images/images_06.png) 0px 0px;
            position: absolute;
            top: 0px;
            left: -10px;
        }

        .border_left {
            width: 10px;
            min-height: 680px; /*比内容高度小20px*/
            background: url(/images/images_07.png) repeat-y 0px 0px;
            position: absolute;
            left: 0px;
            top: 10px;
        }

        .border_right {
            width: 10px;
            min-height: 680px; /*比内容高度小20px*/
            background: url(/images/images_07.png) repeat-y -21px 0px;
            position: absolute;
            right: 0px;
            top: 10px;
        }

        .border_foot {
            width: 100%;
            height: 10px;
            background: url(/images/images_06.png) 0px -60px;
            position: absolute;
            bottom: 0px;
            left: -10px;
        }

        .border_lefttop {
            width: 10px;
            height: 10px;
            background: url(/images/images_06.png) 0px -80px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .border_rigthtop {
            width: 10px;
            height: 10px;
            background: url(/images/images_06.png) 0px -100px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .border_leftbottom {
            width: 10px;
            height: 10px;
            background: url(/images/images_06.png) 0px -120px;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

        .border_rightbottom {
            width: 10px;
            height: 10px;
            background: url(/images/images_06.png) 0px -140px;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }


        .Foot {
            width: 100%;
            height: 72px;
            background-color: #0064a3;
            position: fixed;
            bottom: 0px;
            }

        .Foot_Log {
            float: right;
            display: inline;
            margin-right: 20px;
            margin-top: 5px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            function ShowTime() {
                var mydate = new Date();
                var str = "" + mydate.getFullYear() + "年";
                str += (mydate.getMonth() + 1) + "月";
                str += mydate.getDate() + "日"; // <br/>
                //str += mydate.toLocaleTimeString();
                //str += ":" + mydate.toLocaleTimeString();
                //str += ":" + mydate.getMilliseconds() + " <br/>星期";
                str += "  星期";
                str += "天一二三四五六".charAt(mydate.getDay());// +"<br/>今年是闰年吗?:";
                //str += ((mydate.getFullYear() % 4 == 0 && mydate.getFullYear() % 100 != 0) || (mydate.getFullYear() % 400 == 0)) ? "是" : "不是";
                $(".Top_Main span").html("今天是" + str);//+ "  <a href=\"/ShowPage.aspx\">返回旧版</a>"
            };
            ShowTime();
            setInterval(ShowTime, 1000);
        });

        //查询
        function Search() {
            var SearchDate = $("#txt_SearchDate").val();
            $(".iframeContent").each(function () {
                var Strsrc = $(this).find("iframe").attr("src");
                if (Strsrc.indexOf("Date") > 0) {
                    Strsrc = Strsrc.toString().substring(0, Strsrc.indexOf("Date") + 4);
                }
                else {
                    Strsrc += "&Date";
                }
                Strsrc += "=" + SearchDate;
                $(this).find("iframe").attr("src", Strsrc + "&Rid=" + Math.random());
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="Top">
            <div class="Top_Main">
                <h2>
                    <img id="TitleImg" src="/images/images_2_rjfldb.jpg" /></h2>
                <span style="right: 50px;">今天是2014年8月2日 星期六</span>
                <div style="position: absolute; top: 105px; right: 100px; display: none;">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <input type="text" id="txt_SearchDate" onclick="WdatePicker()" style="width: 80px;" />
                            </td>
                            <td>
                                <input type="button" id="Btn_Search" value="查询" onclick="Search()" /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="Main">
            <div class="Main_Content">
                <div class="Content">
                    <div id="content_main" style="position: relative; overflow: auto;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="SliderContent" style="position: absolute;">
                            <tr>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_ljbfb.aspx" frameborder="0" width="100%" height="100%"></iframe>                                        
                                    </div>
                                </td>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_fldb.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_fldb1.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_fldb2.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                
                                 <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietNum_rcjk.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietNum_rcjk1.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietNum_rcjk2.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>

                                <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_rjfldb.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                                 <td>
                                    <div class="iframeContent" style="width:100%">
                                        <iframe src="/DisplayBoards/DietStructure_rjfldb1.aspx" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="Content_foot">
                        <a href="javascript:void(0);" onclick="ChangeRun()">
                            <img id="startbutton" src="/Images/images_23.jpg" width="55" height="55" isstart="false" /></a>
                        <ul id="idNum" class="Page"></ul>
                    </div>
                    <script type="text/javascript">
                        var content_main_height = parseInt($("#content_main").css("width").toString().replace("px", ""));
                        $("#content_main").css("width", content_main_height - 30);
                        //alert($("#content_main").css("width"));
                        $(".iframeContent").css("width", $("#SliderContent").css("width")).css("height", $("#content_main").css("height"));

                        //页面代码
                        var forEach = function (array, callback, thisObject) {
                            if (array.forEach) {
                                array.forEach(callback, thisObject);
                            } else {
                                for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
                            }
                        }
                        var st = new SlideTrans("content_main", "SliderContent", 9, { Vertical: false });

                        var nums = [];
                        //插入数字
                        for (var i = 0, n = st._count - 1; i <= n;) {
                            var li = document.createElement("li");
                            if (i < 9) {
                                li.style.background = "url(/images/Display/images_r.png) no-repeat";
                            }
                            (nums[i] = $$("idNum").appendChild(li)).innerHTML = "";
                            ++i;
                        }
                        var li_bg;
                        forEach(nums, function (o, i) {
                            o.onmouseover = function () {
                                li_bg = o.style.background; o.style.background = ""; o.className = "on"; st.Auto = false; st.Run(i);
                            }
                            o.onmouseout = function () {
                                o.style.background = li_bg; o.className = ""; if ($("#startbutton").attr("IsStart") == "true") { st.Auto = true; st.Run(); }
                            }

                            //o.onmouseover = function () { o.className = "on"; st.Auto = false; st.Run(i); }
                            //o.onmouseout = function () {o.className = ""; if ($("#startbutton").attr("IsStart") == "true") { st.Auto = true; st.Run(); } }
                        })

                        //设置按钮样式
                        st.onStart = function () {
                            forEach(nums, function (o, i) {
                                o.className = st.Index == i ? "on" : "";

                            });
                            switch (st.Index) {
                                case 0:
                                    $("#TitleImg").attr("src", "/images/images_2_fldb.jpg");
                                    break;
                                case 1:
                                    $("#TitleImg").attr("src", "/images/images_2_ljbfb.JPG");
                                    break;
                                case 2:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                                case 3:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                                case 4:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                                case 5:
                                    $("#TitleImg").attr("src", "/images/images_2_ljbfb.JPG");
                                    break;
                                case 6:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                                case 7:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                                case 8:
                                    $("#TitleImg").attr("src", "/images/images_2_rjfldb.jpg");
                                    break;
                            }

                        }

                        //控制开始与停止
                        function ChangeRun() {
                            if ($("#startbutton").attr("IsStart") == "false") {
                                st.Auto = true;
                                st.Run();
                                $("#startbutton").attr("src", '/Images/images_10.png').attr("IsStart", "true");
                            }
                            else {
                                st.Auto = false;
                                $("#startbutton").attr("src", '/Images/images_23.jpg').attr("IsStart", "false");
                            }
                        }
                    </script>
                </div>
                <div class="border_top"></div>
                <div class="border_left"></div>
                <div class="border_right"></div>
                <div class="border_foot"></div>
                <div class="border_lefttop"></div>
                <div class="border_rigthtop"></div>
                <div class="border_leftbottom"></div>
                <div class="border_rightbottom"></div>
            </div>
        </div>
        <div class="Foot">
            <div class="Foot_Log">
                <img src="/images/images_04.jpg" />
            </div>
        </div>
    </form>
</body>
</html>
